<template>
  <div class="reg">
    <div class="top">
      <router-link to="" @click.native="fanHui()">&lt;</router-link>
      <div class="top_title">注册</div>
    </div>
    <div class="deng_lu">
      <img src="../../public/picture/logreg/1.png" alt="" />
      <div class="number">
        <form action="">
          <div>
            <p>手机</p>
            <input
            autocomplete="off"
              type="text"
              name="iphone"
              placeholder="请输入手机号"
              v-model="phone.val"
              oninput="value=value.replace(/[^\d]/g,'')"
              maxlength="11"
              @blur="test1()"
              @input="test()"
            />
            <span v-show="hintShow">{{ hint }}</span>
          </div>
          <div>
            <p>密码</p>
            <input
              type="password"
              name="mima"
              placeholder="请输入密码"
              v-model="phone.val1"
              oninput="value=value.replace(/[^\w]/g,'')"
              maxlength="15"
              minlength="8"
              @blur="mima()"
              @focus="show()"
              @input="mima()"
            />
            <span v-show="mmShow">{{ mm }}</span>
            <span class="ts_xx" v-show="isshow"
              >请输入8到15位由数字或者字母组成的密码</span
            >
          </div>
          <div>
            <p>确认密码</p>
            <input type="password" name="password" placeholder="请再一次输入密码" v-model="queMima" @input="queRen()" @blur="queRen()" />
            <span v-show="que">{{queTishi}}</span>
          </div>
        </form>
      </div>
      <!-- <hr> -->
      <div class="jump">
        <router-link @click.native="jump()" to="">注册</router-link>
        <router-link to="/login">登录</router-link>
      </div>
      <div class="san_dl">
        <hr />
        <p>其他方式登录</p>
        <ul>
          <li>
            <span class="iconfont icon-QQ"></span>
            <span>QQ</span>
          </li>
          <li>
            <span class="iconfont icon-zhifubao"></span>
            <span>支付宝</span>
          </li>
          <li>
            <span class="iconfont icon-youxiang"></span>
            <span>邮箱注册</span>
          </li>
        </ul>
      </div>
    </div>

    <div class="ti_shi" v-show="tiShi">
        {{tsTitle}}
    </div>

  </div>
</template>

<script>
export default {
  data() {
    return {
      tiaoZhuan:'',
      isshow: false,
      hintShow: false, // 提示语显示
      hint: "", // 提示语
      mmShow: false,
      mm: "",
      isphone: false,
      mi_ma: false,
      ismima: true,
      jumpym: "",
      tiShi:false,
      tsTitle:'',
      que:false,
      queMima:'',
      queTishi:'',
      queFlag:false,
      phone: {
        val: "",
        val1: "",
      },
    };
  },
  methods: {
    fanHui(){
      window.history.go(-1)
    },
    // 手机号码验证
    test() {
      const reg = /^1([38]\d|5[0-35-9]|7[3678])\d{8}$/;
      if (
        this.phone.val == "" ||
        this.phone.val.length <= 10 ||
        !reg.test(this.phone.val)
      ) {
        this.hintShow = true;
        this.hint = "手机号码格式错误";
        this.isphone = false;
      } else {
        this.hintShow = true;
        this.hint = "手机号码格式正确";
        this.isphone = true;
      }
    },
    test1(){
this.$axios.post('http://47.114.130.21:3000/reg','phone='+String(this.phone.val)+'&flag='+2).then((data)=>{
        if(data.data.code=="500"){
          this.hint=data.data.msg
        }
      })
      if(this.phone.val == ""){
        this.hintShow = true;
        this.hint = "手机号码格式错误";
        }
    },
    show() {
      this.isshow = true;
    },
    mima() {
      const reg = /^[a-zA-Z0-9]{8,15}$/;
      this.isshow = false;
      if (
        this.phone.val1 == "" ||
        this.phone.val1.length > 15 ||
        this.phone.val1.length <= 7 ||
        !reg.test(this.phone.val1)
      ) {
        this.mmShow = true;
        this.mm = "密码格式错误";
        this.mi_ma = false;
        return false;
      } else {
        this.mmShow = true;
        this.mm = "密码格式正确";
        this.mi_ma = true;
        return true;
      }
      
    },
    jump() {
      if (this.isphone && this.mi_ma && this.ismima&&this.queFlag) {
        this.$axios.post('http://47.114.130.21:3000/reg','phone='+String(this.phone.val)+'&password='+String(this.phone.val1+'&flag='+1)).then((data)=>{
          if(data.data.code=="200"){
            this.tsTitle=data.data.msg;
            setTimeout(()=>{
          this.$router.push('/Login')
        },1000)
          }else if(data.data.code=="400"){
            this.tsTitle=data.data.msg;
          }else if(data.data.code=="404"){
            this.tsTitle=data.data.msg;
          }
        this.tiShi=true;
          setTimeout(()=>{
          this.tiShi=false;
        },1000)
    }) 
      } else {
        this.jumpym = "";
        this.tiShi=true;
        this.tsTitle='手机号码格式错误或者密码格式错误！'
        setTimeout(()=>{
          this.tiShi=false;
        },1000)
      }
    },
    queRen(){
      if(this.queMima!=this.phone.val1||this.queMima==''){
        this.queFlag=false
        this.que=true
        this.queTishi="密码错误"
      }else{
        this.queFlag=true
        this.que=true
        this.queTishi="密码正确"
      }
    }
  },
};
</script>


<style lang="less" scoped>
.reg {
  background-color: #ffffff;
  z-index: 1;
  position: absolute;
  left: 0px;
  right: 0px;
  bottom: 0px;
  top: 0px;
  .ti_shi{
    top: 40%;
    position: absolute;
    background: #ccc;
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
    padding: 5px;
    border-radius: 2px;
    color: #fff;
  }
  .deng_lu {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    // padding: 0.266667rem 0.266667rem;
    border-radius: 5px;
    text-align: center;
    background-color: rgba(255, 255, 255, 0.5);
    width: 90%;
    height: 80%;
    img {
      width: 1.733333rem;
    }
    .number {
      margin-bottom: 0.133333rem;
      width: 100%;
      > form {
        > div {
          position: relative;
          p {
            text-align: left;
            font-size: 13px;
            margin-bottom: 0.133333rem;
          }
          input {
            height: 0.8rem;
            outline: none;
            border: none;
            width: 100%;
            font-size: 14px;
            border-bottom: 1px solid #cccccc;
            margin-bottom: 0.4rem;
            padding-left: 0.133333rem;
          }
          > .ts_xx {
            position: absolute;
            line-height: 0.533333rem;
            top: 10px;
            width: 75%;
            left: 60px;
            background: #cccccc;
            height: 0.533333rem;
            border-radius: 13px;
            color: #ffffff;
          }
        }
      }
    }
    .jizu_wo {
      height: 0.666667rem;
      text-align: left;
      input {
        vertical-align: middle;
        width: 0.48rem;
        height: 0.48rem;
        margin-right: 0.133333rem;
      }
      span {
        vertical-align: middle;
        color: #888;
        font-size: 13px;
      }
    }
    /* hr{
          margin: 0.453333rem 0px;
          border: 1px solid #cccccc;
          background: #cccccc;
        } */
    .jump {
      width: 100%;
      a {
        text-align: center;
        width: 100%;
        display: block;
        margin-bottom: 0.266667rem;
        font-size: 17px;
      }
      :first-child {
        margin-top: 0.9rem;
        line-height: 1.1rem;
        border-radius: 25px;
        height: 1.1rem;
        border: 1px solid #ff734c;
        background: #ff734c;
        color: #ffffff;
      }
      :last-child {
        margin-top: 0.8rem;
        color: #71797f;
      }
    }
    > p {
      text-align: right;
      margin-bottom: 0.133333rem;
      a {
        font-size: 12px;
        color: #333;
      }
    }
    .san_dl {
      margin-top: 0.8rem;
      hr {
        color: rgba(0, 0, 0, 0.2);
        border: 0.1px solid rgba(0, 0, 0, 0.2);
        background: rgba(0, 0, 0, 0.2);
      }
      p {
        width: 3.733333rem;
        background: #ffffff;
        color: rgba(0, 0, 0, 0.2);
        font-size: 14px;
        background: #fff;
        text-align: center;
        margin: -0.32rem auto;
      }
      ul {
        margin-top: 1.066667rem;
        width: 100%;
        display: flex;
        flex: 1;
        list-style: none;
        justify-content: space-around;
        li {
          width: 100%;
          display: flex;
          flex-flow: row;
          justify-content: center;
          align-items: center;
          span {
            margin: 0px 0.4rem;
          }
          :first-child {
            font-size: 24px;
            color: #1cacea;
          }
          :last-child {
            margin-left: -0.133333rem;
            font-size: 12px;
          }
        }
      }
    }
  }
}
</style>